// var that;
class Tab {
    constructor(selector) {
        //页面加载时就获取元素
        this.main = document.querySelector(selector)
        this.lis = this.main.getElementsByTagName('li')
        this.cons = this.main.getElementsByTagName('section')
        this.rmBtns = this.main.getElementsByClassName('icon-guanbi');
        this.ul = this.main.querySelector('ul')
        this.consBox = this.main.querySelector('.tabscon')
        this.addBtn = this.main.querySelector('.tabadd span')

        // that = this
        this.init()
        // console.log(that);
    }
    //动态添加元素
    updateNode() {
        this.span = this.main.querySelectorAll('.fisrstnav li span:first-child')
        this.section = this.main.querySelectorAll('.tabscon section')
    }
    init() {
        //循环注册事件
        this.updateNode()
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggle.bind(this.lis[i], this);
            this.rmBtns[i].onclick = this.del.bind(this.rmBtns[i], this);
            this.span[i].ondblclick = this.edit
            this.section[i].ondblclick = this.xedit
        }
        this.addBtn.onclick = this.add.bind(this.addBtn, this)
    }
    //所有li取消高亮，所有sectiopn隐藏
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            //tab 里面的li 删除类名
            this.lis[i].className = ''
            //tab里面的cons 删除类名
            this.cons[i].className = ''
        }
    }
    //切换
    toggle(that) {
        //调用取消高亮
        that.clearClass()
        //当前的li高亮 console.log(that);
        this.className = 'liactive'
        //对应section显示
        that.cons[this.index].className = 'conactive'
    }
    //新增
    add(that) {
        //定义li 及section字符串
        //随机数    保留后三位
        var tmp = Math.random().toFixed(3)
        //新建一个li
        var li = `<li class="liactive">
       <span>新li${tmp}</span><span class="iconfont icon-guanbi"></span>
     </li>`
        var section = `<section class="conactive">${tmp}</section>`
        //调用 取消高亮
        that.clearClass()
        //将li及section添加到ul和conBox中
        that.ul.insertAdjacentHTML('beforeend', li)
        that.consBox.insertAdjacentHTML('beforeend', section)
        //重新注册事件
        that.init()
    }
    //删除
    del(that, e) {
        //阻止冒泡
        e.stopPropagation();
        //获取当前li索引  当前this代表删除按钮   
        var index = this.parentNode.index
        //删除当前li 
        // this.parentNode.remove()
        that.lis[index].remove()
        //删除对应的section
        that.cons[index].remove()
        //重新注册事件
        that.init()
        //当我们删除的li不是选中时 高光不变
        // 当还有liactive  这个类时 高光不变  没有就index--
        if (document.querySelector('.liactive')) return
        //点击事件返回上一个Li
        index--
        //自动触发点击事件
        that.lis[index] && that.lis[index].click()
        // console.log(this);
    }
    //编辑
    edit() {
        var str = this.innerHTML
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = '<input type="text" />'
        var input = this.children[0]
        input.value = srt
        input.select()
        input.onblur = function () {
            if (this.value !== '') {
                this.parentNode.innerHTML = this.value;
            } else {
                this.parentNode.innerHTML = srt;
            }
        }
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        }
    }
    xedit() {
        //获取section的值
        var str = this.innerHTML
        //禁止双击选中字符
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        //添加一个input框
        this.innerHTML = '<input type="text" />'
        //获取input框
        var input = this.children[0]
        //input的值等于section
        input.value = str
        //点击选中input的值
        input.select()
        //input的值给到section
        input.onblur = function () {
            if (input.value != '') {
                this.parentNode.innerHTML = this.value
            } else {
                // this.parentNode.innerHTML = '请重新输入值'
                this.parentNode.innerHTML = str
            }
        }
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur()
            }
        }
    }
}
new Tab('#tab');
// console.log(that);